<template>
  <a-modal width="1300px" v-model:visible="visible" title="重复商品统计" :footer="false" draggable>
    <div class="box">
      <GiTable
        row-key="id"
        id="54"
        v-model:columns="columns"
        :loading="loading"
        :data="tableData"
        :scroll="{ x: '100%', y: 600, minWidth: 1000 }"
        :pagination="false"
        :showT="false"
      >
        <template #content="{ record }">
          <template v-if="record.content">
            <a-popover title="文案内容">
              <div class="text-overflow-1 w-full overflow-hidden">{{ record.content }}</div>
              <template #content>
                <div style="word-break: break-word; white-space: pre-line" class="w-70n">{{ record.content }}</div>
              </template>
            </a-popover>
          </template>
          <template v-else>--</template>
        </template>
        <template #goods="{ record }">
          <a-tag
            v-for="(item, index) in record.goodsId"
            :key="index"
            class="mr-4 mb-4"
            checkable
            color="red"
            :checked="check === item"
            @click="dimension(item)"
          >
            {{ item }}
          </a-tag>
        </template>
      </GiTable>
    </div>
  </a-modal>
</template>

<script setup>
import { sourceChatRoomRepeatGoodsMessage } from '@/apis'

const visible = ref(false)
const loading = ref(false)
const tableData = ref([])
const check = ref()
const checkArr = ref()

const listPrarms = reactive({
  sourceChatroomId: undefined,
  startAt: undefined
})

const columns = ref([
  {
    title: '源头群名称',
    width: 200,
    align: 'center',
    tooltip: true,
    ellipsis: true,
    dataIndex: 'chatroomName'
  },
  {
    title: '统计日期',
    width: 180,
    align: 'center',
    dataIndex: 'submitAt'
  },
  {
    title: '文案内容',
    width: 300,
    slotName: 'content'
  },
  {
    title: '商品ID',
    width: 200,
    slotName: 'goods'
  }
])

const getTableData = async () => {
  try {
    loading.value = true
    const res = await sourceChatRoomRepeatGoodsMessage(listPrarms)
    tableData.value = res.data
  } finally {
    loading.value = false
  }
}

// 打开编辑框并回显表单值
const addOrEdit = (item) => {
  listPrarms.sourceChatroomId = item.sourceChatroomId
  listPrarms.startAt = item.date
  getTableData()
  visible.value = true
}

const dimension = (tag) => {
  if (tag == check.value) {
    check.value = null
    checkArr.value = []
  } else {
    check.value = tag
    checkArr.value = []
    tableData.value.forEach((element, index) => {
      if (element.goodsId.includes(tag)) {
        checkArr.value.push(index)
      }
    })
  }
}

defineExpose({ addOrEdit })
</script>

<style lang="scss" scoped>
// .box {
//   :deep(.arco-table-th-title) {
//     font-weight: bold;
//   }
//   :deep(.offRow .arco-table-td) {
//     background: rgba(241, 241, 241, 0.4);
//   }
//   :deep(.errorRow .arco-table-td) {
//     background: #f1f1f1;
//     color: #d63f3f !important;
//   }
//   :deep(.errorRow .arco-statistic-value) {
//     color: #d63f3f !important;
//   }
// }
//
</style>
